<h2 class="mt-30">
  {{t "loggingPage.syslog.header"}}
</h2>
<hr />
<section class="box">
  <div class="row">
    <label class="acc-label">
      {{t "loggingPage.endpoint"}}
      {{field-required}}
    </label>
    <div class="input-group">
      {{input
        type="text"
        value=config.endpoint
        classNames="form-control"
        placeholder=(t "loggingPage.syslog.endpointPlaceholder")
        id="syslog-endpoint"
      }}
      <div class="input-group-btn bg-primary">
        <BasicDropdown @horizontalPosition="left" as |dd|>
          <dd.Trigger class="btn bg-default text-uppercase">
            <span class="pr-5">
              {{config.protocol}}
            </span>
            <i class="icon icon-chevron-down"></i>
          </dd.Trigger>
          <dd.Content>
            <li {{action dd.actions.close}}>
              <a {{action "changeProtocol" "tcp"}}>
                TCP
              </a>
            </li>
            <li {{action dd.actions.close}}>
              <a {{action "changeProtocol" "udp"}}>
                UDP
              </a>
            </li>
          </dd.Content>
        </BasicDropdown>
      </div>
    </div>
    <p class="text-info text-small mb-0">
      {{t "loggingPage.syslog.endpointHelpText"}}
    </p>
  </div>
  <div class="row">
    <div class="col span-6 mt-0 pt-0">
      <label class="acc-label" for="">
        {{t "loggingPage.syslog.program"}}
      </label>
      {{input
        type="text"
        value=config.program
        classNames="form-control"
        placeholder=(t "loggingPage.syslog.programPlaceholder")
      }}
      <p class="text-info text-small">
        {{t "loggingPage.syslog.programHelpText"}}
      </p>
    </div>
    <div class="col span-6 mt-0 pt-0">
      <label class="acc-label" for="">
        {{t "loggingPage.splunk.token"}}
      </label>
      {{input
        type="text"
        value=config.token
        classNames="form-control"
        placeholder=(t "loggingPage.splunk.tokenPlaceholder")
      }}
      <p class="text-info text-small">
        {{t "loggingPage.syslog.tokenHelpText" htmlSafe=true}}
      </p>
    </div>
  </div>
  <div>
    <span class="mr-10">
      Log Severity:
    </span>
    {{#each severities as |item|}}
      <label class="mr-10 text-capitalize">
        {{radio-button selection=config.severity value=item.value}}
        {{t item.label}}
      </label>
    {{/each}}
    {{t "loggingPage.syslog.severityHelpText" htmlSafe=true}}
  </div>
</section>
{{logging/form-log-ssl
  config=config
  targetType=targetType
  disabled=(or (not enableSSLConfig) (not config.enableTls))
}}
{{logging/form-log-format
  logPreview=logPreview
  model=model
  loggingModel=parentModel
}}
{{!--
{{#advanced-section advanced=showAdvanced}}
{{logging/form-log-docker model=model parentModel=parentModel}}
{{/advanced-section}} --}}